
import LivePlayer from '@/components/LivePlayer'
import styles from './styles.module.scss'
import usePlayerState from '@/components/LivePlayer/utils/usePlayerState'
import { Breadcrumb } from 'antd';
import Title from '@/components/Title'
import Hotscore from '@/assets/hotscore.png'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import Head from 'next/head'
import RenderJudge from '@/components/RenderJudge'
import VideoPlay from '@/components/H5/Video'
const VideoTape = ({ videoInfo, currentKey, slideData, bottomData, mobile, en, pageLink }) => {
  const { playerRef } = usePlayerState(videoInfo);
  const [videoBackList, setSlideList] = useState([])
  useEffect(() => {
    setSlideList(() => {
      const index = slideData?.findIndex(row => row.id === videoInfo?.id)
      const newArr = [...slideData]
      if (index > -1) newArr.splice(index, 1)
      return [videoInfo, ...newArr]
    })
  }, [videoInfo, slideData])
  return (
    <>
      <Head>
        <title>{videoInfo?.videoName || videoInfo?.title}</title>
      </Head>
      <RenderJudge active={<VideoPlay pageLink={pageLink} en={en} bottomData={bottomData} currentKey={currentKey} mobile={mobile} videoInfo={videoInfo}></VideoPlay>} value={mobile} inactive={
        <>
          <nav className={styles.nav}>
            <Breadcrumb separator=">">
              <Breadcrumb.Item href='/'>首页</Breadcrumb.Item>
              <Breadcrumb.Item>{videoInfo?.videoName || videoInfo?.title}</Breadcrumb.Item>
            </Breadcrumb>
          </nav>
          <section className={styles.liveBack}>
            <section className={styles.player}>
              <LivePlayer ref={playerRef} videoBackList={[{
                videoSrc: videoInfo?.videoSrc || videoInfo?.videoUrl
              }]} />
              <aside>
                {
                  videoBackList?.map((row, index) => (
                    <Link href={`/${pageLink}/${en}/${row?.id}`} key={index}>
                      <a>
                        <img src={row?.videoImg || row?.coverImg} />
                        <p className='textoverone'>{row?.videoName || row?.title}</p>
                      </a>
                    </Link>
                  ))
                }
              </aside>
            </section>
          </section>

          <aside className={styles.bottomBlock}>
            <blockquote style={{ height: 20 }}></blockquote>
            <Title img={Hotscore} text="精彩视频"></Title>
            <blockquote style={{ height: 20 }}></blockquote>
            <section className={styles.blocks}>
              {bottomData?.map(row => (
                <Link href={`/${pageLink}/${en}/${row?.id}`} key={row?.id}>
                  <a>
                    <img src={row?.videoImg || row?.coverImg} />
                    <p className='textoverone'>{row?.videoName || row?.title}</p>
                  </a>
                </Link>
              ))}
            </section>
          </aside>
        </>
      } />
    </>
  )
}

export default VideoTape